<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="text1" value="请输入用户名" />
	</body>
</html>

<script type="text/javascript">
	var text = document.getElementById('text1').value;
	// 获得焦点时,文字消失
	document.getElementById('text1').onfocus = function() {
		var text3 = document.getElementById('text1').value;
		if (text3 === text) {
			this.value = '';
		}
	}
	
	// 失去焦点时,文字重现
	document.getElementById('text1').onblur = function() {
		var text2 = document.getElementById('text1').value;
		if (!text2) {
			this.value = text;
		}
	}
	
</script>